<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/yddreset.css" />
    <link rel="stylesheet" href="css/XDW-login.css"/>
    <link rel="stylesheet" href="css/jquery.idcode.css" />
    <script src="css/jquery.js"></script>
    <script src="css/XDW-login.js"></script>
    <script src="css/jquery.idcode.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/jquery-validation/jquery.validate.js"></script>
    <script src="js/jquery-validation/additional-methods.js"></script>


    <title></title>
    <style>
        label.error {
            color: red;
        }
        em{
            font-style: normal;
        }
        em.error {
            background: url("https://www.runoob.com/try/jquery/plugins/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }

        em.success {
            background: url("https://www.runoob.com/try/jquery/plugins/images/checked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }
    </style>

</head>
<body>
<header id="header">

</header>

<div class="nav">
    <a class="newagg" href="https://www.newegg.cn"></a>
    <a class="txt"> | 欢迎登录</a>

</div>


<section>

    <div class="box">
        <a href="#">
        <img src="https://s.neweggimages.com.cn/WebResources/2009/Default/Nest/img/logoin_bg.jpg">
        </a>
             <form>
                 <div class="dd0">
                     <span>登录新蛋</span>
                     <a href="register.html">注册新用户>></a>
                 </div>
                 <div class="dd1">
                        <label>
                            用户名 : <input name="uname"  placeholder="用户名/已验证手机或邮箱"/>
                        </label>
                    </div>
                    <div class="dd2">
                        <label>
                            登录密码  :  <input name="upwd"/>
                        </label>
                    </div>
                    <div class="dd3">
                        <label>
                            验证码 : <input type="text" id="Txtidcode" class="txtVerification"> <span id="idcode"> </span>
                             <a href="javascript:void(0)" class="change" style="color: #000000"> 换一张 </a>

                        </label>
                    </div>
                    <div class="dd4">
                        <label>
                            <a class="Get" href="https://www.newegg.cn/Service/HelpCenter.aspx?sysno=54">  账户安全</a>
                            <a class="Password" href="https://secure.newegg.cn/Customer/GetPassword.aspx">  忘记密码？</a>
                        </label>
                    </div>
                    <div class="dd5">
                        <button> 立 即 登 录 </button>
                    </div>
                  <div class="dd6">
                    <p>您还可以使用以下合作伙伴的账户登录新蛋网：</p>
                      <a class="AliPayLogon" href="https://secure.newegg.cn/Customer/Passport/AliPay/Logon.aspx">支付宝</a>
                      <a class="TencentQQLogon" href="https://secure.newegg.cn/Customer/Passport/TencentQQ/Logon.aspx">QQ</a>
                      <a class="WeiXinLogon" href="javascript:void(0);">微信</a>
                      <a class="SinaLogon" href="https://secure.newegg.cn/Customer/Passport/Sina/Logon.aspx">新浪微博</a>
                      <a class="CmpayLogon" href="https://secure.newegg.cn/Customer/Passport/Cmpay/Logon.aspx">手机支付</a>
                      <a class="SDOLogon" href="https://secure.newegg.cn/Customer/Passport/SDO/Logon.aspx">盛大登录</a>
                      <a class="ThunderLogon" href="https://secure.newegg.cn/Customer/Passport/Thunder/Logon.aspx">迅雷</a>
                      <a class="PuTianLogon" href="https://secure.newegg.cn/Customer/Passport/PuTian/Logon.aspx">莆田政府采购登录</a>
                  </div>

                 </form>
         </div>
</section>

<footer id="footer">

</footer>
</body>
</html>
<script src="css/index.js"></script>

<script>
    $(function () {
        $.idcode.setCode();//加载生成验证码方法

        $(".change").on("click", function () {
            $.idcode.setCode();
        });
//自己定义的检测用户的规则
        $.validator.addMethod("checkedUser", function (val) {
            //字母开头不能是数字开头
            return /^[a-z]\w{5,17}$/i.test(val)
        });
        $.validator.addMethod("checkedChinese", function (val) {
            //字母开头不能是数字开头
            return /^[\u4e00-\u9fa5]+$/.test(val)
        });

        $("form").validate({
// rules 规则
            rules: {
                uname: {
                    required: true, //必填
                    checkedUser: true,
                },
                upwd: {
                    required: true, //必填
                    rangelength: [6, 16]
                },
            },
// messages 规则是否合法 问题提示
            messages: {
                uname: {
                    required: "用户名必填",
                    checkedUser: "用户名必须字母开头,6-18位",
                    remote: "改用户已存在"
                },
                upwd: {
                    required: "密码必填", //必填
                    rangelength: "密码长度必须是{0}-{1}"
                },
            },
            //submitHandler 提交
            submitHandler: function () {
                console.log(111);
                var IsBy = $.idcode.validateCode();
                if (!IsBy) {
                    layer.msg("验证码错误");
                    return false;
                }
                //准备参数,通过ajax发送服务器上
                console.log($("form").serialize());
                $.ajax({
                    url: "../server/loginServer.php",
                    type: "post",
                    data: $("form").serialize(),
                    dataType: "json"
                }).then((res) => {
                    console.log(res);
                    if (res.status == 1) {

                        //如果登录成功了,就把当前登陆者的信息保存到 localStorage
                        localStorage.setItem("userinfo",($("form").serialize()));

                    console.log(res.data);
                        layer.confirm(res.msg + ',是否去主页面', {

                                icon: 1,
                                title: "登录提示",
                                btn: ['是的', '不去'] //按钮
                            },
                            function () {
                                location = "index.html"
                            },
                            function (index) {
                                layer.close(index)
                            });


                    } else if (res.status == -4) {
                        layer.confirm(res.msg + ',是否去注册', {
                                icon: 2,
                                title: "登录提示",
                                btn: ['是的', '不去'] //按钮
                            },
                            function () {
                                location = "register.html"
                            },
                            function (index) {
                                layer.close(index)
                            });
                        }
                     }, (res) => {
                });
                return false;
            },
        })
    })
</script>












